<template>
	<view class="container">
		<titlebara text="系统通知" @rightIconClick="allRead"  :back="true" :text="text" backgroundColor='#f5f5f5' img="@appstatic/message/message_icon_titlebar.png">
		</titlebara>
		
		<scroll-view :style="'top:'+navigationBarHeight+'px ;'+'height:'+contentHeight+'px;width: 100%;position:fixed;'" scroll-y="true" @scrolltolower="handleToLower">
			<view class="interact-message-list" >
				<view v-for="(item,index) in interactList" class="row" @click="getLevcMessage(item)">
					
					<!-- <view style="height: 64px" v-if="item.subType==1">
						<view class="head">
							<view  class="left">
								<view style="float: left;width: 6px;height: 22px;">
									<image v-if="item.isReady==1" style="padding-bottom: 2px; width: 6px;height:6px;" src="@appstatic/message/message_icon_iteract_dot.png" mode="aspectFit"></image>
								</view>
								<view style="float: left;">
									<text style="padding-left: 4px;line-height: 19.6px;font-weight: 500,medium;font-size: 14px;">{{item.name}}</text>
								</view>
							</view>	
							<view class="time">
								<text>{{item.sendTime}}</text>
							</view>
						</view>
						<view class="body">
							<text>{{item.context}}</text>
						</view>
					</view>
					
					<view style="height: 32px" v-if="item.subType==2 || item.subType==3 || item.subType==4">
						<view class="head">
							<view  class="left">
								<view style="float: left;width: 6px;height: 22px;">
									<image v-if="item.isReady==1" style="padding-bottom: 2px; width: 6px;height:6px;" src="@appstatic/message/message_icon_iteract_dot.png" mode="aspectFit"></image>
								</view>
								<view style="float: left;">
									<text style="padding-left: 4px;line-height: 19.6px;font-weight: 500,medium;font-size: 14px;">{{item.context}}</text>
								</view>
							</view>	
							<view class="time">
								<text>{{item.sendTime}}</text>
							</view>
						</view>
					</view> -->
					
					<!-- <view>
						<view class="head">
							<view  class="left">
								<view style="float: left;width: 6px;height: 22px;">
									<image v-if="item.isReady==1" style="padding-bottom: 2px; width: 6px;height:6px;" src="@appstatic/message/message_icon_iteract_dot.png" mode="aspectFit"></image>
								</view>
								<view style="float: left;width:150px" >
									<view class="dot">
										<text style="padding-left: 4px;line-height: 19.6px;font-weight: 500,medium;font-size: 14px;">{{item.context}}</text>
									</view>
								</view>
							</view>	
							<view class="time">
								<text>{{item.sendTime}}</text>
							</view>
						</view>
					</view> -->
					<view>
						<view class="head">
							<view  class="left">
								<view style="width: 6px;height: 22px;">
									<image v-if="item.isReady==1" style="padding-bottom: 2px; width: 6px;height:6px;" src="@appstatic/message/message_icon_iteract_dot.png" mode="aspectFit"></image>
								</view>
								<view style="width:250px">
									<view class="dot">
										<text style="padding-left: 4px;line-height: 19.6px;font-weight: 500,medium;font-size: 14px;">{{item.context}}</text>
									</view>
								</view>
							</view>	
							<view class="time">
								<text>{{item.sendTime}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<empty v-if='!interactList.length' text='暂无订单数据' />
		</scroll-view>
		<view class="bimg">
			<image style="width:100%;height:100%" src="@appstatic/message/message_icon_interact_background.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import titlebara from '@/components/titlebar/titlebar'
	import empty from '@components/empty/empty.vue'
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("../../utils/dialog.js");
	export default {
		components: {
			titlebara,
			empty
		},
		data() {
			return {
				
				text:"互动通知",
				page:'',
				interactList:[],
				pagination:{
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 15,
					length: 100
				},
				total:'',
				allList:[],
				navigationBarHeight:app.globalData.navigationBarHeight,
				contentHeight:app.globalData.windowHeight-app.globalData.navigationBarHeight-(app.globalData.tabBarHeight),
				fromType:'message'
			}
		},
		
		onLoad: function(options) {
		   // this.loadData(true);
		   if (util.isLogin(getApp())) {
			   this.$fire.$on('interactMsg', function(){
			   		this.showInteractList(true);
			   });
		   }
		   if(options.from){
			   this.fromType=options.from
		   }
		   
		},
		onShow: function(options) {
			this.showInteractList(true);
		},
		mounted() {
			// this.showInteractList(true);
		},
		methods:{
			handleToLower(){//触底
				var that=this;
				if(that.pagination.loadMore){
					// that.params.page+=1;
					that.pagination.page+=1;
					this.showInteractList(false)
				}else{
					uni.showToast({
						title:"暂无更多数据",
						duration: 3000,
						icon: 'none'
					})
				}
			},
			 showInteractList(isRefresh){
				 // console.log("showInteractList");
				var that=this;
				var uri=app.globalData.config.interfaces.URL_SYS_SENDMSG_GETLEVCMSG_TYPE;
				var params={
					"pageNum":isRefresh?1:that.pagination.page,
					"pageSize":that.pagination.limit,
					"isType":2
				};
				network.get(uri,params,'form').then(res=>{
					
					// console.log(res.data);
					if(res.code==200){
						that.total=res.data.total
						var _list=res.data.list;
						if(isRefresh){
							//总页数
							var totalPage=Math.ceil(res.data.total / that.pagination.limit);
							that.pagination.totalPage=totalPage;
							//length
							that.pagination.length=res.data.total;
							//停止下拉
							uni.stopPullDownRefresh()
							that.interactList=_list ? _list:[]
						}else{
							if(_list && _list.length>0){
								that.interactList=[...that.interactList,..._list]
							}
						}
						if(that.pagination.page==that.pagination.totalPage){
							that.pagination.loadMore=false
						}
						
						//传值 是否全部已读
						// debugger
						// var read=2
						// for(var i=0;i<that.interactList.length;i++){
						// 	if(that.interactList[i].isReady==1){
						// 		read=1
						// 	}
						// }
						// setTimeout(()=>{
						// 	uni.$on('interactsend',()=>{
						// 		uni.$emit("interactread",{read:read})
						// 	})
						// 	// uni.$emit("read",{read:read})
						// },500)
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res=>{
					uni.stopPullDownRefresh();
					uni.showToast({
						title:res.message,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				})
			},
			refresh(id){
				
				// console.log(this.interactList)
				var list=this.interactList
				var length=this.interactList.length
				for(var i=0;i<length;i++){
					if(id==list[i].id){
						list[i].isReady=2
					}
				}
			},
			//点击消息 查看详情
			getLevcMessage(item){
				debugger
				//关注的消息
				if(item.subType==4 || item.subType==9){
					uni.navigateTo({
						//关注
						url:"/module_my/pages/follower?from="+this.fromType+"&myId="+item.id
					})
				}else if(item.subType==1 || item.subType==2 || item.subType==3){
					//除关注之外
					var uri=app.globalData.config.interfaces.URL_COMMUNTIY_DETAIL;
					var params={
						"id":item.relationId,
						"loginId":app.globalData.userInfo.id
					};
					network.get(uri,params,'form').then(res=>{
						// console.log(res)
						var id = "";
						if(res.data.subType==1){
							uni.navigateTo({
								//动态
								url:"/module_community/pages/moments/detail/detail?id="+res.data.id+"&from="+this.fromType+"&myId="+item.id
							})
						}
						if(res.data.subType==2){
							uni.navigateTo({
								//用户文章
								url:"/module_community/pages/article/detail/detail?id="+res.data.id+"&from="+this.fromType+"&myId="+item.id
							})
						}
						if(res.data.subType==3){
							uni.navigateTo({
								//系统文章
								url:"/module_community/pages/article/detail/detail?id="+res.data.id+"&from="+this.fromType+"&myId="+item.id
							})
						}
						
					}).catch(res=>{
						console.error(res,'err');
						uni.showToast({
							title:res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					})
				}else if(item.subType==5){//问答
					uni.navigateTo({
						//关注
						url:"/module_community/pages/questionAndAnswer/detail/detail?from"+this.fromType+"&myId="+item.id+"&id="+item.relationId
					})
				}else if(item.subType==8 || item.subType==10){//活动评论
					uni.navigateTo({
						url:"/module_community/pages/activity/detail/comment?id="+item.relationId+"&from="+this.fromType+"&myId="+item.id
					})
				}
				
				
				
			},
			//一键已读
			allRead(){
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;
				var params={
					"isType":2
				}
				var that = this;
				network.post(uri,params,'json').then(res=>{
					if(res.code==200){
						//刷新前一页
						let pages = getCurrentPages();
						if(pages.length==2){
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh();
							// #endif
							
							// #ifdef APP-PLUS
							prePage.$vm.refresh();
							// #endif
						}
						that.showInteractList(true);	
						util.syncBadge(getApp())
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
	.container {
		
	}
	.interact-message-list {
		/* padding-top:45px; */
		/* height:100vh; */
		display: flex;
		flex-direction: column;
		padding-left: 16px;
		padding-right: 24px;
	}
	.bimg {
		width: 235.71px;
		height: 209.06px;
		position: fixed;
		right:0px;
		bottom:60px
	}
	.row {
		/* height: 64px;
		padding-top: 16px; */
		height: 48px;
		padding-top: 6px;
		padding-bottom: 6px;
		/* padding-bottom:25px; */
		border-bottom: solid #EDEDED 1px;
	}
	.head {
		display: flex;
		/* flex-direction: row; */
		flex-direction: column;
		/* justify-content: space-between; */
		vertical-align: middle;
		/* align-items: center; */
	}
	.left {
		display:flex;
		flex-direction: row;
	}
	.time {
		font-size: 14px;
		font-weight: 400;
		line-height: 19.6px;
		color: #ADB0AE;
		padding-left:8px;
		padding-top:5px;
	}
	.body {
		padding-top: 8px;
		padding-left: 8px;
		display: -webkit-box;/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;   /*排列方式*/ 
		-webkit-line-clamp: 1;/*显示文本行数*/
		overflow: hidden;/*溢出隐藏*/
	}
	.dot {
		width:100%;
		overflow: hidden;   
		text-overflow: ellipsis;   
		white-space: nowrap;
	}
	.showMore {
		width: 24px;
		height: 24px;
		position: absolute;
		left: 44px;
		top: calc(50% - 12px);
		/*#ifdef APP-PLUS||H5*/
		left: calc(100% - 36px);
		/*#endif*/
	}
	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}
</style>
